<template>
  <div class="detail-album">
    <div class="back" @click="changeRouter">fanhui</div>
    <PubVideo :id="'video1'" :config="videoConfig" />
    <div class="g-m-l-10 g-m-r-10">
      <Advertisement
        class="g-m-t-10"
        :values="pageData.advertise"
        @click="handleAdvertise"
      />
      <UserCharacteristics
        class="g-m-t-10"
        :values="pageData.advertise"
        @success="updateData"
      />
      <UserTendency
        class="g-m-t-10"
        :values="tendency"
        @success="updateData"
      />
      <div class="g-m-t-10">
        <van-tag
          class="g-m-r-10"
          v-for="(item, index) in 5"
          :key="index"
          color="#7232dd"
          round>
          标签
        </van-tag>
      </div>
      <Collection
        class="g-m-t-10"
        :values="pageData.collection"
        @more="show = true"
      />
      <Collection
        class="g-m-t-10"
        :values="pageData.pvGags"
      />
      <Recommend
        class="g-m-t-10"
        :values="pageData.pvGags"
      />
    </div>
    <van-action-sheet
      v-model:show="show"
      title="XXXXX合集（共1/8个视频）"
      :overlay="false"
      style="height: 60vh;"
    >
      <Recommend
        class="g-m-t-10 g-m-l-10 g-m-r-10"
        :values="pageData.pvGags"
      />
    </van-action-sheet>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Toast } from 'vant'
import PubVideo from '@/components/pub-video/index'
import Advertisement from './components/advertisement'
import UserCharacteristics from './components/user-characteristics'
import UserTendency from './components/user-tendency'
import Collection from './components/collection'
import Recommend from './components/recommend'

export default {
  name: 'DetailAlbum',
  components: {
    PubVideo,
    Advertisement,
    UserCharacteristics,
    UserTendency,
    Collection,
    Recommend
  },
  setup() {
    const route = useRoute()
    const state = reactive({
      show: false,
      videoConfig: {
        autoplay: true
      },
      videoDetailId: route.query.from || '1',
      tendency: [{
        isActived: false,
        count: 99
      }, {
        isActived: false,
        count: 99
      }, {
        isActived: false,
        count: 99
      }, {
        isActived: false,
        count: 99
      }],
      pageData: {}
    })

    const getVideoDetail = () => {
      return {
        code: 200,
        data: {
          poster: '//d300.paixin.com/thumbs/3069483/43968111/staff_1024.jpg?imageView2/2/w/500/h/360/format/webp/interlace/1/q/90/ignore-error/1',
          link: 'http://192.168.24.36:3000/zxcu.m3u8',
          advertise: {
            poster: '//d300.paixin.com/thumbs/3069483/43968111/staff_1024.jpg?imageView2/2/w/500/h/360/format/webp/interlace/1/q/90/ignore-error/1',
            title: '广告标题广告标题广告标题广告标题...',
            tag: '广告标签',
            title2: '广告fu标题广告fu标题'
          },
          collection: {
            poster: '//d300.paixin.com/thumbs/3069483/43968111/staff_1024.jpg?imageView2/2/w/500/h/360/format/webp/interlace/1/q/90/ignore-error/1',
            title: '合集标题合集标题合集标题...',
            sum: '共10w个视频 >',
            count: '99.9万',
            time: '1:99:99',
            title2: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题...',
            hasBuy: true
          },
          pvGags: {
            poster: '//d300.paixin.com/thumbs/3069483/43968111/staff_1024.jpg?imageView2/2/w/500/h/360/format/webp/interlace/1/q/90/ignore-error/1',
            title: 'PV&花絮',
            time: '1:99:99',
            title2: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题...'
          }
        }
      }
    }

    const router = useRouter()
    const changeRouter = () => router.go(0)

    const handleAdvertise = () => Toast('广告')

    const updateData = val => {
      switch (val.name) {
        case 'follow':
          Toast('xiexie关注')
          break
        case 'like':
          state.tendency[val.index].isActived = !state.tendency[val.index].isActived
          Toast('赞赞赞赞赞赞')
          break
        case 'star':
          state.tendency[val.index].isActived = !state.tendency[val.index].isActived
          Toast('收藏')
          break
        case 'chat':
          Toast('留言')
          break
        case 'share':
          break
      }
    }

    onMounted(async () => {
      const { data } = await getVideoDetail()
      if (!data) {
        state.pageData = {}
        return
      }
      state.pageData = { ...data }
      state.videoConfig.video = data.link
      state.videoConfig.poster = data.poster
    })

    return {
      ...toRefs(state),
      changeRouter,
      handleAdvertise,
      updateData
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-album {
  background: gray;
  color: #fff;
}
.back {
  position: absolute;
  top: 20px;
  left: 20px;
  color: red;
  font-size: 20px;
  z-index: 9;
}
.g-flex {
  display: flex;
}
.g-jc-sb {
  justify-content: space-between;
}
.g-jc-sa {
  justify-content: space-around;
}
.g-m-l-10 {
  margin-left: 10px;
}
.g-m-r-10 {
  margin-right: 10px;
}
.g-m-r-20 {
  margin-right: 20px;
}
.g-m-t-10 {
  margin-top: 10px;
}
.g-m-l-a {
  margin-left: auto;
}
.g-f-r {
  float: right;
}
.g-w {
  width: 100%;
}
.g-o-x-s {
  overflow-x: scroll;
}
.g-s-h::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.g-relative {
  position: relative;
}
.g-absolute {
  position: absolute;
  top: 60px;
}
.up-advert-img {
  width: 54px;
  height: 34px;
  border-radius: 2px;
}
.up-head-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.up-name {
  height: 20px;
  font-size: 14px;
}
.up-btn {
  height: 28px;
}
.up-crad-img {
  width: 140px;
  height: 80px;
  border-radius: 2px;
}
.bug-video {
  width: 96%;
  height: 30px;
  line-height: 30px;
  border: 1px solid red;
  border-radius: 15px;
  vertical-align: middle;
  background: palevioletred;
}
.list-img {
  width: 150px;
  height: 60px;
  border-radius: 4px;
}
</style>